import React from 'react'
import { connect } from 'react-redux'
import { Avatar, Layout, Menu, Dropdown } from 'antd'
import { Link } from 'react-router-dom'
import { logout, getUserInfo } from '@/store/actions'
import FullScreen from '@/components/FullScreen'
import Hamburger from '@/components/Hamburger'
import BreadCrumb from '@/components/BreadCrumb'
import headImg from '@/assets/images/default-head-02.png'

const { Header } = Layout

const AppHeader = (props) => {
  const { token } = props

  const onDropMenu = e => {
    if (e.key === 'logout') {
      logout(token)
    }
  }
  
  const dropMenu = (
    <Menu className="app-overlay-menu" onClick={onDropMenu}>
      <Menu.Item key="dashboard">
        <Link to="/dashboard">首页</Link>
      </Menu.Item>
      <Menu.Item key="project">
        <a target="_blank" href="https://gitee.com/jikey/react-tool-admin" rel="noopener noreferrer">
          项目地址
        </a>
      </Menu.Item>
      <Menu.Divider />
      <Menu.Item key="logout">退出登录</Menu.Item>
    </Menu>
  )


  return (
    <Header className="app-header">
      <Hamburger />
      <BreadCrumb />
      <Menu id="app-header-nav" className="app-header-nav none" mode="horizontal" defaultSelectedKeys={['2']}>
        <Menu.Item key="1">nav 1222</Menu.Item>
        <Menu.Item key="2">nav 2</Menu.Item>
        <Menu.Item key="3">nav 3</Menu.Item>
      </Menu>
      <div className="app-helper-menu">
        <FullScreen />
        <div className="header-dropdown-wrap">
          <Dropdown overlayClassName="app-header-down" arrow={true} overlay={dropMenu} overlayStyle={{ right:'-30px', left:0 }}>
            <div><Avatar size="medium" src={headImg} /></div>
            {/* <div><Avatar size="medium" src={avatar} /></div> */}
          </Dropdown>
        </div>
      </div>
    </Header>
  )
}

const mapStateToProps = state => {
  return {
    ...state.app,
    ...state.user,
  }
}

export default connect(mapStateToProps, { logout, getUserInfo })(AppHeader)
